<template>
  <div>
    <!-- <h3>当前最新的count值是:{{this.$store.state.count}}</h3> -->
    <h3>{{$store.getters.num}}</h3>
    <button @click="add">+1</button>
    <button @click="handler1">+step</button>
    <button @click="handler2">+1 Async</button>
     <button @click="handler3">+n Async</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
 export default {
    name:'Addition',
    data(){
        return{

        }
    },
    methods:{
        ...mapMutations(['add']),
        handler1(){
            this.$store.commit('addN',3)
        },
        // 异步的让count自增加一
        handler2(){
            // dispatch函数是专门用来触发action函数的
            this.$store.dispatch('addAsync')
        },
        handler3(){
            this.$store.dispatch('addnAsync',5)
        }
    }
}
</script>

<style>

</style>